<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>


<link href="<%=application.getContextPath()%>/css/css-crm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.7.2.min.js"></script>
<script language="javaScript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.20.custom.min.js"></script>

<script language="JavaScript" src="<%=application.getContextPath()%>/js/gen_validatorv4.js" type="text/javascript" ></script>

<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.6.min.js"></script>	
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.17.custom.min.js"></script>	
<link rel="stylesheet" href="<%=application.getContextPath()%>/css/jquery-ui-1.8.17.custom.css"/>

<script language="JavaScript" src="<%=application.getContextPath()%>/js/gen_validatorv4.js" type="text/javascript" ></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.js"></script>	
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.min.js"></script>	
<style >
.ui-dialog {
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
	#bulletinDialog title{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}


</style>
<script language="javascript">

        function addRow(userTable) {
 
            var table = document.getElementById(userTable);
 			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
			
			
			table.setAttribute("bgColor", "#C5E4EB");
		    var cell0=row.insertCell(0);
		    cell0.setAttribute("bgColor","#FFFFFF");
		    cell0.innerHTML='<input type="checkbox" name="chkbox"/>';
			var cell1 = row.insertCell(1);
		    cell1.innerHTML = rowCount ;
           	cell1.setAttribute("bgColor","#FFFFFF");
                      	
            var cell2 = row.insertCell(2);
            cell2.setAttribute("bgColor","#FFFFFF");
            var element2 = document.createElement("input");
			element2.type = "text";
			element2.name="userName"+rowCount;
			element2.id="userName"+rowCount;
			element2.className="user";
			element2.size="15";
            cell2.appendChild(element2);
            
            
            var cell3 = row.insertCell(3);
            cell3.setAttribute("bgColor","#FFFFFF");
            var element3 = document.createElement("input");
			element3.type = "text";
			element3.name="designation"+rowCount;
			element3.id="designation"+rowCount;
			element3.className="user";
			element3.size="15";
            cell3.appendChild(element3);
            
            
            var cell4 = row.insertCell(4);
            cell4.setAttribute("bgColor","#FFFFFF");
            cell4.innerHTML='<select name="userGroup'+rowCount+'" class="groupDiv" id="userGroup'+rowCount+'" style="border: 0px;">'
	 			+' <option value="Please Select">Please Select</option>'
                +'</select>';
                
            var cell5 = row.insertCell(5);
            cell5.setAttribute("bgColor","#FFFFFF");
            cell5.innerHTML='<select name="division'+rowCount+'" class="dropDiv" id="division'+rowCount+'" style="border: 0px;">'
	 			+' <option value="Please Select">Please Select</option>'
                +'</select>';
                
                
			var cell6 = row.insertCell(6);
			cell6.setAttribute("bgColor","#FFFFFF");
			 var element6= document.createElement("input");
				element6.type = "text";
				element6.name="phone"+rowCount;
				element6.id="phone"+rowCount;
				element6.className="user";
				element6.size="15";
	            cell6.appendChild(element6);
	            
	            var cell7 = row.insertCell(7);
				cell7.setAttribute("bgColor","#FFFFFF");
				 var element7= document.createElement("input");
					element7.type = "text";
					element7.name="cell"+rowCount;
					element7.id="usercell"+rowCount;
					element7.className="user";
					element7.size="15";
		            cell7.appendChild(element7);
			
		            var cell8 = row.insertCell(8);
					cell8.setAttribute("bgColor","#FFFFFF");
					 var element8= document.createElement("input");
						element8.type = "text";
						element8.name="fax"+rowCount;
						element8.id="userfax"+rowCount;
						element8.className="user";
						element8.size="15";
			            cell8.appendChild(element8);
			            
			
			 var cell9 = row.insertCell(9);
			//cell5.innerHTML='<input name="org[]"  id="org"'+rowcount+' type="text" class="tablebox-form" size="8"  />';
			 cell9.setAttribute("bgColor","#FFFFFF");
			 var element9 = document.createElement("input");
				element9.type = "text";
				element9.name="email"+rowCount;
				element9.id="email"+rowCount;
				element9.className="email";
				element9.size="15";
	            cell9.appendChild(element9);
				
            var hidden=document.createElement("input");
            hidden.type="hidden";
            hidden.name="rowcount";
            hidden.value=rowCount;
 			cell6.appendChild(hidden);

       
 			 var colcount=parseInt($("#rowcount").val());
 			 colcount=colcount+1;
 			 $("#rowcount").val(colcount);
 			 $("#userName"+rowCount).focus();

        }
 
        
        function deleteRow(userTable) {
            try {
            var table = document.getElementById(userTable);
            var rowCount = table.rows.length;
 			
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
            }
			for(var i=0; i<rowCount-1; i++)

           table.rows[i+1].cells[1].innerHTML = i+1;
            }catch(e) {
               // alert(e);
            }
            
            
            var colcount=parseInt($("#rowcount").val());
			 var initcount=parseInt($("#initCount").val());
			 colcount=colcount-1;
			 $("#rowcount").val(colcount);
			
			 //alert(colcount);
        }
       

    </script>
    <script language="javascript">
    $(document).ready(function(){
    	$('.dropDiv').live('focus',function(){
    		var e2=document.getElementById(this.id);
    		
    	   	
    		var divs=$("#divs").val();
    		//isSpclChar(divs);
    		
    		if(divs!=""){
    		var temp=divs.split(",");
    		
    		
    		if(temp != null){
    			
    			if(e2.options.length>1){
    			for(var i=0;i<temp.length;i++){
    				if(e2.options.length>i+1){
    				if(e2.options[i+1].value!=temp[i]){
    				var o=document.createElement('option');
    				o.value=temp[i];
    				o.text=temp[i];
    				e2.options.add(o);
    				
    				}
    				}else {
    					var o=document.createElement('option');
        				o.value=temp[i];
        				o.text=temp[i];
        				e2.options.add(o);
    				}
    			}
    			}
    				else{
    					for(var i=0;i<temp.length;i++){
    	    				   	    				
    	    				var o=document.createElement('option');
    	    				o.value=temp[i];
    	    				o.text=temp[i];
    	    				e2.options.add(o);
    	    				
    	    				}
    				}
    	    			
    					
    				}
    		}
    			});
    	
    	
    	
    	$('.groupDiv').live('focus',function(){
    		var e2=document.getElementById(this.id);
    		
    	   	
    		var divs=$("#group").val();
    		//isSpclChar(divs);
    		
    		if(divs!=""){
    		var temp=divs.split(",");
    		
    		
    		if(temp != null){
    			
    			if(e2.options.length>1){
    			for(var i=0;i<temp.length;i++){
    				if(e2.options.length>i+1){
    				if(e2.options[i+1].value!=temp[i]){
    				var o=document.createElement('option');
    				o.value=temp[i];
    				o.text=temp[i];
    				e2.options.add(o);
    				
    				}
    				}else {
    					var o=document.createElement('option');
        				o.value=temp[i];
        				o.text=temp[i];
        				e2.options.add(o);
    				}
    			}
    			}
    				else{
    					for(var i=0;i<temp.length;i++){
    	    				   	    				
    	    				var o=document.createElement('option');
    	    				o.value=temp[i];
    	    				o.text=temp[i];
    	    				e2.options.add(o);
    	    				
    	    				}
    				}
    	    			
    					
    				}
    		}
    			});
    	
    	
    	});
    		
    
    function isSpclChar(divs){
    	
		  // var iChars = "&,?";
		   alert("the divs:"+divs.match("&,?"));
		  /*  if(divs.match(iChars)==-1)
			   {
		 /*   if(document.qfrm.q.value.indexOf(iChars) != -1) { */
		    /*  alert ("The box has special characters. \nThese are not allowed.\n");
		     return false;
		   }  */
		}
    </script>
    <script type="text/javascript">
    function isSpclCharAll(){
    	   var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
    		var busName=$("#orgName").val();
    	   if(busName.match(iChars) != -1) {
    	     alert ("The box has special characters. \nThese are not allowed.\n");
    	     return false;
    	   }
    	}

   
    $(document).ready(function(){
       $("#clidet").validate({
    	   rules:{
    		   orgName: "required",
    		   compShrtName: "required",
    		   cliEmail: {
    				required: true,   
    				email: true
    		   },
       tellNumber:{
    	   required: true,  
    	   number:  true
       },
    		   div: "required",
    		   fax: { 
    			   required: true,
    			   number:  true
    			   }
    	   },
       messages:{
    	   orgName: "Organisation must not be empty",
    	   compShrtName: "Company short Name Must Not be empty",
    	   div: "Division Must not Be empty",
    	   cliEmail:{
    		   required: "Email must not be empty",
    		   email: "Please give the valid email address"
    	   },
    	   tellNumber:{
        	   required: "Telephone phone Number requred",  
        	   number:  "Telephone Number must be in Digits"
           },
           fax:{
        	   required: "Fax Number requred",  
        	   number:  "Fax Number must be in Digits"
        	   
           }
       }
       });
       });
    </script> 
</head>

<body>
<div id="main">
  <%@ include file="common/header.jsp" %>
  <%@ include file="common/submenu.jsp" %>
  <div id="content">
  <div id="resultMsg" class="result_msg" >
    <% 
    	if(request.getParameter("clientdet")!=null){
    		out.println(request.getParameter("clientdet"));
    	}
    	
    %>
    </div>
      <div id="clisname"  style="display: none; text-align: center; padding-top:5px;" >
  <label style="font-family:Arial; font-size: 12px; font-weight: bold ; align: center; color: red;">The ClientShort Name is Already Exists!Please Choose Another</label>
    </div>
    
  <form action="../client/save.do" method="post" id="clidet" >
    <div id="work-area2">
      <div class="heading2">Client</div>
      <div class="boxIFS">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="366"><table width="1087" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="6">&nbsp;</td>
                  <td width="164">&nbsp;</td>
                  <td width="205">&nbsp;</td>
                  <td width="61">&nbsp;</td>
                  <td width="165">&nbsp;</td>
                  <td width="486">&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Organisation Name</td>
                  <td align="left" valign="top"><input type="text" name="orgName" id="orgName" class="form"   />   </td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Group/Directorate</td>
                  <td align="left" valign="top"><input type="text" name="group" id="group" class="form" /></td>
                </tr>
                <tr>
                  <td height="5"></td>
                  <td height="5" align="left" valign="top"></td>
                  <td height="5" align="left" valign="top">                 </td>
                  <td align="left" valign="top"></td>
                  <td align="left" valign="top"></td>
                  <td align="left" valign="top"></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Division</td>
                  <td align="left" valign="top"><input type="text" name="div" id="divs" class="form" /></td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Company Short Name</td>
                  <td align="left" valign="top"><input type="text" name="compShrtName" id="compShrtName" onblur="javascript:busNameCheck();"  class="form" /></td>
                </tr>
                <tr>
                  <td height="5"></td>
                  <td height="5" align="left" valign="top"></td>
                  <td height="5" align="left" valign="top"></td>
                  <td align="left" valign="top"></td>
                  <td align="left" valign="top"></td>
                  <td align="left" valign="top"></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Tele Number</td>
                  <td align="left" valign="middle"><input type="text" name="tellNumber" class="form" /></td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">WebSite</td>
                  <td align="left" valign="top"><input type="text" name="website" id="website" value="" class="form"/></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Fax</td>
                  <td align="left" valign="top"><input type="text" name="fax" class="form" /></td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Email</td>
                  <td align="left" valign="top"><input  type="text" name="cliEmail" class="form-lowercase" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">&nbsp;</td>
                  <td align="left" valign="top">&nbsp;</td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">&nbsp;</td>
                  <td align="left" valign="top">&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Customer Type</td>
                  <td align="left" valign="top"><table width="180px" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="26"><input type="radio" name="ctype" value="public"/></td>
                      <td width="52">Public</td>
                      <td width="27"><input type="radio" name="ctype" value="private"/></td>
                      <td width="195">Private</td>
                    </tr>
                  </table></td>
                  <td>&nbsp;</td>
                  <td align="left" valign="top">Address</td>
                  <td align="left" valign="top"><textarea name="address" class="form-textarea"></textarea></td>
                </tr>
                  <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  </tr>
            </table></td>
            </tr>
        </table>
      </div>
       <div class="boxtable">

        <table width="100%" id="userTable" border="0" cellpadding="4" cellspacing="1" bgcolor="#C5E4EB">
          <tr>
          	 <td width="36" height="30" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x"> </td>
            <td width="36" height="30" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x">S.No </td>
            <td width="138" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Name of the User</td>
            <td width="138" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Designation</td>
            <td width="140" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Group</td>
            <td width="140" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF"> Division</td>
            <td width="162" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x bgcolor="#FFFFFF">Phone</td>
            <td width="186" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Cell</td>
            <td width="186" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Fax</td>
            <td width="186" align="left" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Email</td>
          </tr>
          <tr>
          	<td align="center" valign="middle" bgcolor="#FFFFFF"><input type="checkbox" name="chkbox"/></td>
            <td bgcolor="#FFFFFF">1</td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input type="text" name="userName1"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input type="text" name="designation1"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><select name="userGroup1"   class="groupDiv" style="border: 0px;" id="userGroup1" >
              <option value="">Please Select</option>
            </select></td>
            <td align="left" valign="top" bgcolor="#FFFFFF">
            <select name="division1"   class="dropDiv" style="border: 0px;" id="division1" >
                 <option value="">Please Select</option>
                </select>            </td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input type="text" name="phone1"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input type="text" name="cell1"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input type="text" name="fax1"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input style="text-transform:lowercase" type="text" name="email1"/></td>
          </tr>
        </table>
         <div class="box3">	
        	<div class="buttonleft"><a href="addRow('userTable')" >Add User</a></div> 
                         <div class="buttonleft"><a href="deleteRow('userTable')" >Delete User</a></div>
                      	 <input type="hidden" id="rowcount" name="rowcount" value="1"/>
          </div>         
               <div class="box3">
	    			<div class="buttton-main">
	    				<input type="button" class="button" value="Edit" onclick="javascript: retriveClient()"/>
	    				<input type="reset" class="button" value="Clear" />
	    				<input type="submit" id="savebutton" class="button" value="Save" onclick=" javascript : processFormData();"/>
	    			</div>
		  </div>
	  </div>  
    </div>
    </form>    
    <div id="bulletinDialog"   title="Client   Edit   Here" style="display: none;">
                  <div id="clientSearchBox" title="ClientEdit Here">
           <form action="<%= application.getContextPath()%>/client/clientEdit.do" method="post">
           
            <table >
           <tr><td>&nbsp;</td></tr> 
           <tr><td align="left"><select name="clientName"  id="clientId">
                   </select></td>
                   <td align="right">  <input class="button" type="submit" id="ok"  onclick="javascript:return  Editvalidate();" value="Edit"/></td></tr>
                    </table>
                    </form>
                    </div>
                    
        </div>
  </div>
  <div id="footer"></div>
  
  </div>
</body>
</html>
<script  type="text/javascript">
function retriveClient(){
	
	$.ajax({
		url:" <%=application.getContextPath()%>/client/getClientDet.do",
		mimetype: "text/plain",
		cache:false,
		success: function(res){
			var e2=document.getElementById('clientId');
			$('#clientId')
		    .find('option')
		    .remove()
		    .end()
		   	;
			var temp=res.split(",");
			var o=document.createElement('option');
			o.value="";
			o.text="Please Select";
			e2.options.add(o);
			if(temp != null){
				for(var i=0;i<temp.length-1;i++){
					var o=document.createElement('option');
					o.value=temp[i];
					o.text=temp[i];
					e2.options.add(o);
				}
			}
			
			
		}

	});
	
	


	var $dialog = $('#bulletinDialog').dialog({
                autoOpen: false,
                modal: true,
                width: 460,
                height: 150
              				
            });
 			 
            $dialog.dialog('open');
}
</script>
  
    <script language="JavaScript" type="text/javascript">
    
	function busNameCheck(){
		var busName=$("#compShrtName").val();
		//alert("csname is clicked");
		var data="name="+busName;
		if(busName!=null && busName!=""){
			$.ajax({
				url:" <%=application.getContextPath()%>/client/cliNameCheck.do",
				mimetype: "text/plain",
				method: "post",
				data: data,
				cache:false,
				success: function(res){
					//alert("Response Is :"+res);
					if(res=="true"){
						$("#clisname").hide();
					}else{
						//jAlert("Client ShortName Already Exists \n Please Enter Another.");
						$("#clisname").show();
						$("#compShrtName").focus();
					}
				}
			
			});
		}
	}
	
function processFormData(){
	
  var frmvalidator  = new Validator("clidet");
  
  var rowcount=document.getElementById("rowcount");
  var rowc=rowcount.value;
  isSpclCharAll();
  for(var i=1;i<=rowc;i++)
	  {
  frmvalidator.addValidation("userName"+i,"req","Please enter User"+i+"");
  frmvalidator.addValidation("userName"+i,"maxlen=30",	"Max length for User"+i+" is 30");
  
  
  frmvalidator.addValidation("phone"+i,"req","Please enter Phone No"+i);
  frmvalidator.addValidation("phone"+i,"maxlen=11","Max length of PhoneNo"+i+" is 11");
  frmvalidator.addValidation("phone"+i,"numeric","Phone No"+i+"Phone Number Must be in NumberForamt");
  
  frmvalidator.addValidation("email"+i,"req","Please enter Email"+i+" Of User"+i);
  frmvalidator.addValidation("email"+i,"email","Email"+i+" Is  Not Valid for User"+i);
  
	  }
}

function Editvalidate(){
	var srcname=$("#clientId").val();
	if(srcname==null || srcname==""){
		//jAlert("srcnameis"+srcname);
		jAlert("Please Select One Client");
		$("#clientId").focus();
		return false;
	}
	else
		{
		return true;
		}
}
</script>
    